<div class="row" style="margin-bottom:48px;">
	<div class="col-md-8 col-md-offset-2">
	    <p>With this free online font converter tool you can create C array from any TTF or WOFF font. You can select ranges of Unicode characters and speficy the bpp (bit-per-pixel).</p>

	    <p>The font converter is designed to be compatible with <a href="https://lvgl.io" title="Open-source Embedded GUI Library">LVGL</a> but with minor modification you can make it compatible with other graphics libraries.</p>

		<p>The offline version of the converter is available <a href="https://github.com/lvgl/lv_font_conv" title="Offline font converter on GitHub">here</a></p>

		<h3>How to use the font converter?</h3>
		<ol>
		    <li>Give <strong>name</strong> to the output font. E.g. "arial_40"</li>
		    <li>Specify the <strong>height</strong> in px</li>
		    <li>Set the <strong>bpp</strong> (bit-per-piel). Higher value results smoother (anti-aliased) font</li>
		    <li>Choose a <strong>TTF or WOFF font</strong></li>
		    <li>Set a <strong>range</strong> of Unicode character to include in your font or list the characters in the <strong>Symbols</strong> field</li>
			<li>Optionally choose and other font too and specify the ranges and/or symbols for it as well. The characters will be merged into the final C file.</li>
		    <li>Click the <strong>Convert</strong> button to download the result C file.</li>
		</ol>

		<h3>How to use the generated fonts in LVGL?</h3>
		<ol>
		    <li>Copy the result C file into your LVGL project</li>
		    <li>In a C file of your application declare the font as: <code class="code-inline">extern lv_font_t my_font_name;</code>
		        or simply <code class="code-inline">LV_FONT_DECLARE(my_font_name);</code></li>
		    <li>Set the font in a style: <code class="code-inline">style.text.font = &amp;my_font_name;</code> </li>
		</ol>
	</div>
</div>

<div class="row">
	<div class="col-md-9 col-md-offset-2">
		<form id="converterForm" enctype="multipart/form-data" name="font_conv" style="padding:12px; border-radius:4px; border-style:solid; border-width:2px; border-color:#7babda">

			<!-- GENERAL PARAMTERS -->

			<div class="form-group row">
				<label for="name" class="form-label col-md-2">Name</label>
				<div class="col-md-5">
					<input type="text" name="name" id="name" class="form-control" placeholder="E.g. arial_40">
				</div>
			</div>

			<div class="form-group row">
				<label for="height" class="col-md-2 col-form-label">Size</label>
				<div class="col-md-5">
					<input type="number" name="height" id="height" class="form-control" placeholder="Height in px" value="20">
				</div>
			</div>

			<div class="form-group row">
				<label for="bpp" class="col-md-2 col-form-label">Bpp</label>
				<div class="col-md-5">
				    <select name="bpp" id="bpp" class="form-control" >
	                  <option value="1">1 bit-per-pixel</option>
	                  <option value="2">2 bit-per-pixel</option>
	                  <option value="3">3 bit-per-pixel (Needs compression enabled)</option>
	                  <option value="4">4 bit-per-pixel</option>
	                  <option value="8">8 bit-per-pixel</option>
	                </select>
				</div>
			</div>

			<hr/>

			<div class="form-check">
				<input class="form-check-input" type="checkbox" value="" id="compression">
				<label class="form-check-label" for="compression">
				Enable font compression (reduces size, requires 6.1+)
				</label>
			</div>

			<hr/>


			<div class="form-check" style="display: none;">
				<input class="form-check-input" type="radio" name="exampleRadios" id="subpixel1" value="none" checked>
				<label class="form-check-label" for="subpixel1">
					No subpixel hinting
				</label>
			</div>
			<div class="form-check">
				<input class="form-check-input" type="checkbox" name="exampleRadios" id="subpixel2" value="horz">
				<label class="form-check-label" for="subpixel2">
					Horizontal subpixel hinting (may improve font quality, requires 6.1+)
				</label>
			</div>
			<div class="form-check" style="display: none;">
				<input class="form-check-input" type="radio" name="exampleRadios" id="subpixel3" value="vert">
				<label class="form-check-label" for="subpixel3">
					Vertical subpixel hinting
				</label>
			</div>

			<hr/>

			<div class="form-check">
				<input class="form-check-input" type="checkbox" id="use_color_info" value="" style="vertical-align:top;">
				<label class="form-check-label" for="use_color_info">
					Try to use glyph color info from font to create grayscale icons.<br/>
					<small>Since gray tones are emulated via transparency, result will be good on contrast background only.</small>
				</label>
			</div>
			<hr/>

			<!-- FONTS -->
			<div class="font-controls" id="font-controls-clone-source">
				<div class="form-group row">
					<label class="form-label col-md-2">TTF/WOFF/OTF file</label>
					<div class="col-md-10">
						<input type="file" class="form-control-file font_file" >
					</div>
				</div>

				<div class="form-group row">
					<label class="form-label col-md-2">Range</label>
					<div class="col-md-10">
						<textarea rows="2" cols="40" class="form-control font_range" placeholder="Ranges and/or characters to include. E.g. 0x20-0x7F, 0x200, 450"></textarea>
					</div>
				</div>
				<div class="form-group row">
					<label class="form-label col-md-2">Symbols</label>
					<div class="col-md-10">
						<textarea rows="2" cols="50" class="form-control font_symbols" placeholder="List of character to include. E.g. ABC0123ÁÉŐ"></textarea>
					</div>
				</div>
				<hr/>
			</div>

			<button type="button" id="insert-button" class="btn btn-primary btn-md" style="margin-top:10px">Include another font</button>
			<br/>
			<small>You can use both "Range" and "Symbols" or only one of them</small>
			<hr/>

			<div class="form-group">
				<input type="submit" value="Convert" name="submit" class="btn btn-primary btn-lg">
			</div>

			<div class="form-group">
			</div>
		</form>

    <p><a href="/ttf-font-to-c-array-old">Old version for v5.3</a></p>

    <h3>Useful notes</h3>
    <ul class="ul-space">
        <li><strong>Unicode table</strong> to pick letters: <a href="https://unicode-table.com/" target="_blank">https://unicode-table.com/</a></li>
        <li><strong>Unicode ranges</strong> <a href="http://jrgraphix.net/research/unicode.php" target="_blank">http://jrgraphix.net/research/unicode.php</a></li>
        <li><strong>A pixel perfect font</strong>: <a href="https://sourceforge.net/projects/terminus-font/">Terminus</a>. </li>
        <li><strong>Examples for two-tone or colored fonts</strong>: <a href="https://github.com/google/material-design-icons/blob/master/font/MaterialIconsTwoTone-Regular.otf">Material Design Icons (two-tone version)</a>,
                    <a href="https://github.com/djrrb/Bungee/blob/master/fonts/Bungee_Color_Fonts/BungeeColor-Regular_colr_Windows.ttf">BungeeColor-Regular</a></li>
        <li><strong>List of built-in symbols</strong> Use this <a href="https://lvgl.io/assets/others/FontAwesome5-Solid+Brands+Regular.woff">FontAwesome symbol font</a> and copy this list to <em>Range</em>: <br>
		   		  61441,61448,61451,61452,61452,61453,61457,61459,61461,61465,<br>
		        61468,61473,61478,61479,61480,61502,61512,61515,61516,61517,<br>
		        61521,61522,61523,61524,61543,61544,61550,61552,61553,61556,<br>
		        61559,61560,61561,61563,61587,61589,61636,61637,61639,61671,<br>
		        61674,61683,61724,61732,61787,61931,62016,62017,62018,62019,<br>
		        62020,62087,62099,62212,62189,62810,63426,63650
		        </li>
        <li>To learn more about the <strong>font handling of LVGL</strong> read this <a href="https://docs.lvgl.io/latest/en/html/overview/font.html">Guide</a></li>
        <li>To use the Fonts <strong>without LVGL</strong> you need <em>lv_font.c/h</em>, <em>lv_font_fmt_txt.c/h</em> from <a href="https://github.com/lvgl/lvgl/blob/master/lv_font" target="_blank">here</a>.</li>
    </ul>
  </div>

<script src="./index.js" type="text/javascript"></script>

</div>
